@import './utils/func';
@import './utils/var';

.introduce2 {
  height: 50%;
  font-size: 16px;
  writing-mode: vertical-rl;
}


.page-about {
  .g-main{
    background: white;
  }
  .g-slogan {
    img {
      width: 160px;
      opacity: .89;
    }
  }
  .g-right{
    @extend %bgfull;
    background-image: url("/@@/images/about/bg2.jpg");
  }
  .brand-tit{
    position: absolute; left: $g-left; bottom: 100% - 36%;
    h1{
      font-size: 28px;
    }
    p{
      margin-left: 2px;
      color: $text-gray1;
    }
  }
  .brand-step{
    position: absolute; left: $g-left; top: 44%;
    width: 32% - 8%;

    li{
      padding: 3% 0;
      border-bottom: 1px solid $border-color;
    }
    .year{
      display: inline-block;
      width: 82px;
      margin-right: 4%;
      font-size: 32px;
      vertical-align: middle;
    }
    .text{
      display: inline-block;
      font-size: 12px; color: $text-gray1;
      line-height: 1.15;
      vertical-align: middle;
    }
  }
  .g-items{
    .item:last-child{
      &:before{
        display: none;
      }
    }
    .icon{
      img{
        width: 42px; height: 35px;
      }
    }
    .text{
      font-size: 18px; line-height: 1.12; text-align: center; color: $text-gray1;
      span{
        writing-mode: vertical-rl;
        letter-spacing: 5px;
      }
    }
  }
  .introduce{
    position: absolute; right: $g-right; top: 56%;
    width: 50%;
  }
}
